﻿@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
	<style type="text/css">
		.product-list tbody tr td {
			vertical-align: middle;
		}
	</style>
}

@using dPet.Application.DataObjects;

@model Hangerd.Mvc.ViewModels.PagedListModel<ProductDto>

<div ng-controller="ProductListController">
	<div class="page-header">
		<h3>商品管理</h3>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">
			@using (Html.BeginForm("List", "Product", FormMethod.Get, new { @class = "form-inline" }))
			{
				<div class="input-group">
					<span class="input-group-addon">条码</span>
					<input type="text" name="Barcode" class="form-control input-sm" placeholder="点击此处进行扫码" ng-mousedown="showScanModal()" ng-model="scanedBarcode" />
					<span class="input-group-addon">名称或标签</span>
					<input type="text" name="NameOrTag" class="form-control input-sm" placeholder="请输入商品名称或标签" value="@ViewBag.QueryDto.NameOrTag" />
					<span class="input-group-btn">
						<button class="btn btn-info btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span> 查 询</button>
					</span>
				</div>

				<a href="@Url.Action("Index", "Product")" class="btn btn-info btn-sm" title="添加商品"><span class="glyphicon glyphicon-plus-sign"></span> 添加商品</a>
				<a href="@Url.Action("List", "Product")" class="pull-right">清空筛选条件</a>
			}
		</div>
		<table class="table table-striped text-center">
			<thead>
				<tr>
					<th class="text-center">条码</th>
					<th class="text-center">商品名称</th>
					<th class="text-center">大类</th>
					<th class="text-center">小类</th>
					<th class="text-center" width="80px">单价</th>
					<th class="text-center" width="80px">库存</th>
					<th class="text-center" width="80px">查询标签</th>
					<th class="text-center" width="80px">数量告警</th>
					<th class="text-center" width="80px">过期告警</th>
					<th class="text-center" width="120px">操作</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var product in Model.List)
				{
					<tr>
						<td>@product.Barcode</td>
						<td>@product.Name</td>
						<td>@(product.Category == null ? "-" : product.Category.Name)</td>
						<td>@(product.SubCategory == null ? "-" : product.SubCategory.Name)</td>
						<td>@product.UnitPrice</td>
						<td>@product.Inventories.Sum(i => i.Quantity)</td>
						<td>@(product.QueryTag == null ? "-" : product.QueryTag)</td>
						<td>
							@if (product.EnableQuantityAlarm)
							{
								<span class="glyphicon glyphicon-ok"></span>
							}
						</td>
						<td>
							@if (product.EnableExpiryAlarm)
							{
								<span class="glyphicon glyphicon-ok"></span>
							}
						</td>
						<td>
							<a href="@Url.Action("Index", "Product", new { id = product.Id })">编辑</a>
							&nbsp;&nbsp;
							<a href="javascript:;" ng-click="loadInventories('@product.Id')">库存明细</a>
						</td>
					</tr>
				}
			</tbody>
		</table>
	</div>

	@HtmlUtil.BootstrapPager(Model.PageIndex, Model.PageSize, Model.TotalNumber,
		p => Url.Action("List", "Product", new
		{
			Barcode = ViewBag.QueryDto.Barcode,
			NameOrTag = ViewBag.QueryDto.NameOrTag,
			pageIndex = p
		}))

	<div class="modal fade" id="scan_Modal" tabindex="-1" role="dialog" aria-hidden="true">
		<br /><br /><br /><br />
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<form ng-submit="closeScanModal()">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">读取条码</h4>
					</div>
					<div class="modal-body">
						<input id="txt_scaned_barcode" type="text" class="form-control" placeholder="读取条码" ng-model="scanedBarcode" />
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/ng-template" id="inventoryListModal">
	<div class="modal-header">
		<button type="button" class="close" ng-click="close()">&times;</button>
		<h4 class="modal-title">库存明细  </h4>
	</div>
	<div class="modal-body form-horizontal">
		<table class="table table-striped text-center product-list">
			<thead>
				<tr>
					<th class="text-center">库存编号</th>
					<th class="text-center">过期时间</th>
					<th class="text-center">剩余数量</th>
					<th class="text-center" width="200px">报损报溢</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat='inventory in productInventories'>
					<td>{{ inventory.InventoryNumber }}</td>
					<td>{{ inventory.ExpiryTime }}</td>
					<td>{{ inventory.Quantity }}</td>
					<td>
						<div class="input-group">
							<span class="input-group-btn">
								<label class="btn btn-default btn-sm active" ng-model="inventory.LoType" btn-radio="'@InventoryLOTypeDto.Loss'">报损</label>
								<label class="btn btn-default btn-sm" ng-model="inventory.LoType" btn-radio="'@InventoryLOTypeDto.Overflow'">报溢</label>
							</span>
							<input name="quantity" type="text" class="form-control input-sm" ng-model="inventory.Amount" ng-change="quantityChanged(inventory)" />
							<span class="input-group-btn">
								<button class="btn btn-info btn-sm" type="button" ng-click="reportInventoryLO(inventory);">提交</button>
							</span>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</script>

@section scripts {
	<script type="text/javascript">
		$(document).ready(function () {
			set_left_nav('#ln_ProductList');
		});

		$('#scan_Modal').on('shown.bs.modal', function (e) {
			$("#txt_scaned_barcode").val('');
			$('#txt_scaned_barcode').focus();
		});

		angular.module('dpet').controller('ProductListController', function ($scope, $modal, $http) {
			$scope.productInventories = [];
			$scope.scanedBarcode = '@ViewBag.QueryDto.Barcode';

			$scope.showScanModal = function () {
				$scope.scanedBarcode = '';

				$('#scan_Modal').modal('show');
			};

			$scope.closeScanModal = function () {
				$('#scan_Modal').modal('hide');
			};

			$scope.loadInventories = function (productId) {
				$http.post('/Ajax/ProductInventories',
				{
					'productId': productId
				})
				.success(function (inventories) {
					var modalInstance = $modal.open({
						templateUrl: 'inventoryListModal',
						controller: InventoryListModalController,
						resolve: {
							productInventories: function () {
								return inventories;
							}
						}
					});
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			};
		});

		var InventoryListModalController = function ($scope, $http, $modalInstance, productInventories) {
			$scope.productInventories = productInventories;

			$scope.close = function () {
				$modalInstance.dismiss();
			};

			$scope.reportInventoryLO = function (inventory) {
				if (inventory == undefined) {
					alert("系统繁忙");
					return false;
				} else if (inventory.LoType == undefined) {
					alert("请选择报损报溢类型");
					return false;
				} else if (inventory.Amount == undefined || inventory.Amount < 1) {
					alert("请填写正确的数量");
					return false;
				}

				if (!confirm("提交后会修改库存数量，是否继续提交？"))
					return false;

				$http.post('/Inventory/ReportInentoryLO',
					{
						'productId': inventory.ProductId,
						'inventoryNumber': inventory.InventoryNumber,
						'loType': inventory.LoType,
						'quantity': inventory.Amount
					})
					.success(function (result) {
						alert(result.Message);

						if (result.Value)
							window.location.reload();
					})
					.error(function (result) {
						alert("系统繁忙");
					});
			}

			//检查报损报溢数量的填写
			$scope.quantityChanged = function (inventory) {
				if (isNaN(inventory.Amount) || inventory.Amount < 0)
					inventory.Amount = 0;
			}
		}
	</script>
}